<template>
  <div class="main-question">
    <el-card class="box-card" style="margin-bottom:10px;">
      <div slot="header" class="clearfix">
        <span style="line-height: 32px;">{{ question.questionCaption }}</span>
        <div style="float: right;">
          <el-tag>ID:{{ question.questionId }}</el-tag>
          <el-tag type="success">●{{ question.questionStatus === '0' ? '待发布' : '已发布' }}</el-tag>
          <el-tag type="info">答卷:{{ question.questionNumber }}</el-tag>
          <el-tag type="warning">{{ question.createTimeFormat }}</el-tag>
        </div>
      </div>
      <div>
        <el-dropdown style="padding-right:8px;">
          <span class="el-dropdown-link">
            <i class="el-icon-document" />
            设计问卷
            <i style="margin-left:0;" class="el-icon-caret-bottom el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-edit" @click.native="handlelEdit(question)">编辑问卷</el-dropdown-item>
            <el-dropdown-item icon="el-icon-setting" @click.native="handleQuestionSetting()">问卷设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="padding-right:8px;" @command="handleSendQuestion">
          <span class="el-dropdown-link">
            <i class="el-icon-position" />
            发送问卷
            <i style="margin-left:0;" class="el-icon-caret-bottom el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-link" command="generateQrcode">生成二维码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-document-copy" command="copyLink">复制链接</el-dropdown-item>
            <el-dropdown-item icon="el-icon-monitor" command="previewQuestion">预览问卷</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="padding-right:8px;">
          <span class="el-dropdown-link">
            <i class="el-icon-data-analysis" />
            分析下载
            <i style="margin-left:0;" class="el-icon-caret-bottom el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-reading">统计分析</el-dropdown-item>
            <el-dropdown-item icon="el-icon-position">来源分析</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div style="float: right;">
          <el-link :underline="false" style="padding-right:8px;" icon="el-icon-close" @click="handleStopQuestion">停止</el-link>
          <el-link :underline="false" style="padding-right:8px;" icon="el-icon-document-copy" @click="handleCopyQuestion">复制</el-link>
          <template v-if="question.deleteStatus === '1'">
            <el-link :underline="false" icon="el-icon-refresh" style="padding-right:8px;" @click="handleRecoveryQuestion">恢复</el-link>
            <el-link :underline="false" icon="el-icon-delete" @click="handleCompletelyDeleteQuestion">彻底删除</el-link>
          </template>
          <template v-else>
            <el-link :underline="false" icon="el-icon-delete" @click="handleDeleteQuestion">删除</el-link>
          </template>
        </div>
      </div>
    </el-card>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog title="问卷设置" :visible.sync="questionSettingVisible" :close-on-click-modal="false" :show-close="false">
        <div style="overflow: auto;height:400px;">
          <questionSetting :question="question" @close="questionSettingVisible=false" />
        </div>
      </el-dialog>
    </div>
    <!-- 模态框 二维码-->
    <div style="clear:both;">
      <el-dialog title="二维码生成" :width="'156px'" :visible.sync="qrcodeVisible" :close-on-click-modal="false" @closed="handleQrcodeClose">
        <div ref="qrCode" class="qrcode" />
        <div>
          <el-button type="danger" round size="mini" style="width:100%;" @click="handleReleaseQuestion">发布问卷</el-button>
          <el-button type="primary" round size="mini" style="width:100%;margin-left:0;margin-top:6px;" @click="handleQrcodeDownload">下载二维码</el-button>
          <a ref="downloadA" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import QuestionSetting from './question-setting'
import { publishQuestion, deleteQuestion, completeDeleteQuestion, copyQuestion } from '@/api/questionnaire'
import QRCode from 'qrcodejs2'
export default {
  name: 'MainQuestion',
  components: { QuestionSetting },
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      questionSettingVisible: false,
      qrcodeVisible: false
    }
  },
  mounted: function() {
  },
  methods: {
    // 恢复问卷
    handleRecoveryQuestion() {
      this.question.deleteStatus = '0'
      deleteQuestion(this.question).then(res => {
        if (res.data) {
          this.$message.success('问卷已经恢复！')
          this.$emit('query')
        }
      })
    },
    // 彻底删除
    handleCompletelyDeleteQuestion() {
      this.$confirm('此操作将永久删除该问卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.question.completeDeleteStatus = '1'
        completeDeleteQuestion(this.question).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$emit('query')
          }
        })
      })
    },
    // 删除问卷
    handleDeleteQuestion() {
      if (this.question.deleteStatus === '1') {
        this.$message.error('该问卷已经放入回收站！')
        return
      }
      this.question.deleteStatus = '1'
      deleteQuestion(this.question).then(res => {
        if (res.data) {
          this.$message.success('问卷已经放入回收站！')
          this.$emit('query')
        }
      })
    },
    // 停止问卷
    handleStopQuestion() {
      if (this.question.questionStatus !== '1') {
        this.$message.error('该问卷已经停止！')
        return
      }
      if (this.question.deleteStatus === '1') {
        this.$message.error('该问卷是删除状态，无法停止')
        return
      }
      this.question.questionStatus = '0'
      publishQuestion(this.question).then(res => {
        if (res.data) {
          this.$message.success('停止成功！')
          this.$emit('query')
        }
      })
    },
    // 发布问卷
    handleReleaseQuestion() {
      if (this.question.questionStatus === '1') {
        this.$message.error('该问卷已经发布！')
        return
      }
      if (this.question.deleteStatus === '1') {
        this.$message.error('该问卷是删除状态，无法发布')
        return
      }
      this.question.questionStatus = '1'
      publishQuestion(this.question).then(res => {
        if (res.data) {
          this.$message.success('发布成功！')
          this.$emit('query')
        }
      })
    },
    // 二维码下载
    handleQrcodeDownload() {
      const curCanvas = this.$refs.qrCode.getElementsByTagName('canvas')
      this.$refs.downloadA.href = curCanvas[0].toDataURL('image/png')
      this.$refs.downloadA.download = '二维码'
      this.$refs.downloadA.click()
    },
    // 二维码事件关闭
    handleQrcodeClose() {
      this.$refs.qrCode.innerHTML = ''
    },
    createQrcode(text) {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCode, {
          text: text, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      })
    },
    handleQuestionSetting() {
      this.questionSettingVisible = true
    },
    handlelEdit(question) {
      this.$store.commit('QUESTION_MODULE_SET_QUESTION', {
        type: 'edit',
        question
      })
      this.$router.push({
        name: 'question-edit'
      })
    },
    handleSendQuestion(command) {
      // 预览问卷
      if (command === 'previewQuestion') {
        window.open(this.handleGenerateUrl('preview'), '_blank')
      } else if (command === 'generateQrcode') {
        // 生成二维码 并发送问卷
        this.qrcodeVisible = true
        const url = this.handleGenerateWholeUrl()
        console.log(url)
        this.createQrcode(url)
      } else if (command === 'copyLink') {
        const url = this.handleGenerateWholeUrl()
        this.$copyText(url).then(e => {
          this.$message.success('复制成功！')
        })
      }
    },
    handleGenerateUrl(status) {
      const { href } = this.$router.resolve({
        name: 'questionShow',
        query: { questionId: this.question.questionId, status: status }
      })
      return href
    },
    handleGenerateWholeUrl() {
      const href = this.handleGenerateUrl('commit')
      const source = window.location.href.substring(0, window.location.href.indexOf(window.location.port) + window.location.port.length)
      return source + '/' + href
    },
    handleCopyQuestion() {
      // 复制功能
      const copy = JSON.parse(JSON.stringify(this.question))
      copy.questionCaption = copy.questionCaption + '_复制'
      copy.questionStatus = '0'
      copy.deleteStatus = '0'
      copy.hideQuestionNumber = '0'
      copy.randomQuestionFlag = '0'
      copy.createUserCode = this.$store.state.user.name
      copy.questionDetailList = []
      copyQuestion(copy).then(res => {
        if (res.data) {
          this.$message.success('复制成功！')
          this.$emit('query')
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.main-question {
  .qrcode {
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
      box-sizing: border-box;
    }
  }
}
</style>
